<template>
	<div>
		<div class="header">
			<div class="back">
				<img src="@/static/batchlist/arrow-return.png" class="arrow-return" @click="goBack">
			</div>
			<div class="custome-title">
				{{title}}
			</div>
			<div class="user-info" v-if="hideRight" @click.stop="dropdown">
				<img src="@/static/batchlist/icon-item.png" class="icon-more">
			</div>
			<div v-else class="blank"></div>
			<div class="arrivalNavigation" v-if="ShowHidden">
				<div class="d4"></div>
				<div class="sideNavigation">
					<nav>
						<div @click="goUserInfo">
							<div class="nav">
								<img src="@/static/batchlist/icon-user-info-gray.png" class="icon-style" />
								<span>个人信息</span>
							</div>
						</div>
						<div url="pages/scan/scan">
							<div class="nav">
								<img src="@/static/batchlist/icon-sao.png" class="icon-style" />
								<span>扫一扫</span>
							</div>
						</div>
					</nav>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
export default {
	name: "batch-header",
	props: ["title", "hideRight"],
	data() {
		return {
			ShowHidden: false,
		};
	},
	methods: {
		hide() {
			this.ShowHidden = false;
		},
		dropdown() {
			this.ShowHidden = !this.ShowHidden;
		},
		goBack() {
			// uni.navigateBack({
			// 	delta: 0
			// })
		},
		goUserInfo() {
			this.$router.push({
				name: "userInfo",
				params: {},
			});
		},
	},
};
</script>

<style lang="less" scoped>
.header {
	height: 44px;
	background: #047bfc;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 20px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
	position: relative;
	z-index: 111;

	.arrow-return {
		width: 9px;
		height: 16px;
	}

	.back,
	.user-info,
	.blank {
		width: 35px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-more {
		width: 17px;
		height: 12px;
	}

	.drop-down {
		position: absolute;
		right: 0;
		bottom: -10px;
		font-size: 10px;
		background-color: #ccc;
	}
}

.arrivalNavigation {
	position: absolute;
	right: 7px;
	top: 41px;

	.sideNavigation {
		width: 100px;
		height: 79px;
		background-color: #fff;
		font-size: 14px;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		font-weight: 400;
		color: #333333;
		border-radius: 5px;
		border: 1px solid #eee;
		border-top: none;

		.nav {
			display: flex;
			height: 40px;
			align-items: center;
			padding: 0 8px;

			.icon-style {
				width: 16px;
				height: 16px;
				margin-right: 7px;
			}
		}
	}

	.d4 {
		width: 0;
		height: 0;
		margin-left: 75px;
		margin-top: -10px;
		border-width: 7px;
		border-style: solid;
		border-color: transparent #fff transparent transparent;
		transform: rotate(90deg);
		/*顺时针旋转90°*/
	}
}
</style>
